<template>
    <ul class='list'>
        <li class='item' 
            v-for="item of letters" 
            :key="item"
            :ref='item'
            @click="handleLetterClick"
            @touchstart='handleTouchStart'
            @touchmove='handleTouchMove'
            @touchend='handleTouchEnd'

            >{{item}}</li>
        
    </ul>    
</template>


<script>
import Bscroll from 'better-scroll'
    export default {
        name:'CityAlphabet',
        props:{
            cities:Object
        },
        computed :{
            letters (){
                const letters = []
                for(let i in this.cities){
                    letters.push(i)
                }
                return letters
            }
        },
        data (){
            return {
                tounchStatus:false,
                startY: 0,
                timer:null
            }
        },
        updated (){
            this.startY = this.$refs['A'][0].offsetTop
        },
        methods:{
            handleLetterClick (e){
                // console.log(e.target.innerText)
                this.$emit('change',e.target.innerText)
            },
            handleTouchStart (){
                this.tounchStatus = true
                
            },
            handleTouchMove (e){
                if(this.tounchStatus){
                    //节流
                    if(this.timer){
                        clearTimeout(this.timer)
                    }
                    this.timer = setTimeout(()=>{
                        const startY = this.startY
                    // console.log(startY)
                    const touchY = e.touches[0].clientY - 79
                    const index = Math.floor((touchY - startY)/20)
                    if(index >=0 && index < this.letters.length){
                        this.$emit('change',this.letters[index])
                    }
                    },16)
                    
                    
                }
            },
            handleTouchEnd (){
                this.tounchStatus = false
            },


        }
    }
</script>


<style lang="stylus" scoped>
@import '~styles/varibles.styl';
    .list
        position absolute
        right:0
        top 1.58rem
        width .4rem
        bottom 0
        
        display flex
        flex-direction column
        justify-content center
        .item
            text-align center
            line-height .4rem
            color $bgColor
            touch-action: none;

</style>
